<template>
    <div>
        This is home {{count}}
        <button @click="update">click me</button>
    </div>

<!--    </div>-->
<!--    <div class="main-container">-->
<!--        <h1 v-for="index in 50" :key="index">这是home页面</h1>-->
<!--    </div>-->


</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {futimes} from "fs";

let x:string = '10';

let foo:string = 'foo';
const update = function (num:number):void {
    num++;
}
let y:unknown;
y= 1;
y= 's';
const a:symbol = Symbol();
const z:object = (n:number) => n + 1;
const u:undefined|null = undefined
const n:null = null;
const b:'kee' = 'kee';

const arr:number[] = [1,2,3];
const arr1:readonly (number|string)[] = [1,2,3];
const arr2:Array<number|string> = [1,2,3];
const arr3:Readonly<number|string> = [1,2,3];
const ab:number|string = arr2[0];

const test = (name:string):void=> {
    console.log('name');
}
const v:[string,number] = ['1',1];
// foo = undefined;
// foo = null;

// console.log('1',z(1));


// foo = y;
test('k');
interface Person {
    firstName: string;
    lastName: string;
    age: number;
}
let p:Person = {
    firstName: 'John',
    lastName: 'Smith',
    age: 25
}
console.log('p',p);

class Point {
    x:number;
    y:number;
    constructor(x = 0,y= 0) {
        this.x = x;
        this.y = y;
    }

    // get x() {
    //     console.log(this.x);
    // }
}

let e = new Point(1,2)
console.log(e.x);

enum Color {
    Red,
    Green,
    Blue
}

console.log('Color',Color.Red);

const enum MediaTypes {
    JSON = 'application/json',
    XML = 'application/xml',
}
console.log('MediaTypes',MediaTypes.JSON);
</script>

<style lang="scss" scoped>
.main-container {
    margin: 24px;
    background-color: #fff;
    overflow: auto; // 超出设定高度，出现滚动条
    height: 880px; // 给容器定一个高度
    text-align: center;

    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
    // 滚动条整体部分
    &::-webkit-scrollbar {
        width: 6px;
        height: 8px;
    }
    // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
    &::-webkit-scrollbar-button {
        display: none;
    }
    // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
    &::-webkit-scrollbar-thumb {
        background: rgba(144, 147, 153, 0.3);
        cursor: pointer;
        border-radius: 4px;
    }
    // 边角，即两个滚动条的交汇处
    &::-webkit-scrollbar-corner {
        display: none;
    }
    // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
    &::-webkit-resizer {
        display: none;
    }
}
</style>
